//@ts-nocheck
import React, { useEffect } from 'react'

import * as echarts from 'echarts'
// import 'echarts/lib/component/grid'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/legend'
// import 'echarts/lib/chart/line'
import './index.less'

export interface LinePointYData {
  /**
   * 是否显示交点
   */
  pointShow?: boolean
  /**
   * 交点显示文案
   */
  pointTipText?: string
  /**
   * 交点显示值
   */
  pointTipValue?: string
  /**
   * x
   */
  x: number
  /**
   * y
   */
  y: number
}

interface IProps {
  /**
   * 唯一标识
   */
  chartId?: string
  // /**
  //  * 横坐标数据
  //  */
  // xData?: Array<number>
  /**
   * y坐标数据
   */
  yData?: Array<{ name: string; data: LinePointYData[] }>
  /**
   * y坐标单位
   */
  yUnit?: string
  /**
   * x坐标单位
   */
  xUnit?: string
  /**
   * 图表标题
   */
  title?: string
  /**
   * y坐标的名称
   */
  yTitle?: string
  /**
   * 中位线
   */
  centerLine?: number
  /**
   * 自定义颜色
   */
  lineColors?: Array<string>
  /**
   * 是否展示图例
   */
  showLegend?: boolean
  /**
   * 尺寸大小
   */
  size?: 'default' | 'small'
}

let echartsInstance: any = {}
const LinePointChart: React.FC<IProps> = ({
  chartId,
  yUnit,
  xUnit,
  centerLine,
  yTitle = '',
  title = '',
  showLegend = true,
  lineColors = ['#00D7E1', '#FFBA5C', '#FFED28', '#3B7FFF'],
  yData = [],
  size = 'default'
}) => {
  useEffect(() => {
    echartsInstance[chartId] = echarts.init(document.getElementById(chartId || 'charts-line-point'))
    setOptions()
  }, [])

  useEffect(() => {
    if (echartsInstance[chartId]) setOptions()
  }, [yData])

  const setOptions = () => {
    let xMin = 9999999
    let _series = yData.map((data, index) => {
      let values = []
      let markPoint = []
      data.data.forEach((dataItem, dataIndex) => {
        if (dataItem.pointShow) {
          markPoint.push({
            name: dataItem.pointTipText,
            value: dataItem.y,
            xAxis: dataItem.x,
            yAxis: dataItem.y
          })
        }
        values.push([dataItem.x, dataItem.y])
        if (dataItem.x < xMin) xMin = dataItem.x
      })

      let response: any = {
        name: data.name,
        type: 'line',
        data: values
      }

      if (markPoint.length) {
        response.markPoint = {
          label: {
            show: false
          },
          data: markPoint
        }
      }

      if (lineColors[index]) {
        response.lineStyle = {
          color: lineColors[index]
        }
        response.itemStyle = {
          color: lineColors[index]
        }
      }
      return response
    })
    if (_series.length && centerLine) {
      _series[0].markLine = {
        data: [
          {
            xAxis: centerLine
          }
        ],
        label: {
          padding: 10,
          formatter: function () {
            return xUnit ? `中位数：${centerLine}${xUnit}` : `中位数：${centerLine}`
          }
        }
      }
    }
    echartsInstance[chartId].setOption({
      title: {
        text: title,
        left: size === 'small' ? 2 : 10,
        top: '2%',
        textStyle: {
          color: '#07132B',
          fontWeight: 'normal',
          fontSize: 18,
          fontFamily: 'PingFangSC-Regular, PingFang SC'
        }
      },
      tooltip: {
        trigger: 'item',
        padding: 0,
        borderColor: 'rgba(0,0,0,0)',
        formatter: function (params) {
          if (params.componentType === 'series') {
            return `<div class="line-point-item-modal">
          <p class="title">${params.seriesName}</p>
          <div class="row">
            <div class="line" style="background-color: ${params.color}"></div>
            <p class="content">${xUnit ? params.value[0] + xUnit : params.value[0]}</p>
            <p class="value">${yUnit ? params.value[1] + yUnit : params.value[1]}</p>
          </div>
        </div>`
          } else if (params.componentType === 'markPoint') {
            return `<div class="line-point-mark-modal">
          <p class="title">${params.name}</p>
          <p class="value">${xUnit ? params.data.xAxis + xUnit : params.data.xAxis}</p>
        </div>`
          } else {
            return ''
          }
          //
        }
      },
      grid: {
        left: size === 'small' ? '9%' : '7%',
        top: size === 'small' ? '22%' : '19%',
        bottom: '10%',
        right: '5%'
      },
      legend: {
        top: '3%',
        show: showLegend
        // orient: 'vertical',
        // left: 'right'
      },
      xAxis: {
        type: 'value',
        // boundaryGap: false,
        // data: xData,
        min: xMin,
        // max: 100,
        axisLine: {
          lineStyle: {
            color: '#DCE0E6'
          }
        },
        axisLabel: {
          color: '#8B98A9',
          fontSize: 12,
          margin: 15,
          formatter: function (value) {
            return xUnit ? value + xUnit : value
          }
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#8B98A9',
          formatter: function (value, index) {
            if (index === 0 && yTitle) {
              return yTitle
            } else if (yUnit) {
              return `${value} ${yUnit}`
            } else {
              return value
            }
          }
        },
        splitLine: {
          lineStyle: {
            color: '#DCE0E6',
            type: 'dashed'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      series: [..._series]
    })
  }

  return <div className="charts-line-point" id={chartId || 'charts-line-point'} />
}
export default (LinePointChart)
